<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2017/6/9 0009
 * Time: 上午 9:53
 */
use yii\helpers\Html;

use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use yii\bootstrap\Modal;//弹窗引用类
use kartik\select2\Select2;
use yii\web\JsExpression;
use app\common\Functions;//下拉按钮是本项目自己封装的类，需要引用自定义的类
?>

<style>
    .item{
        border-bottom: 0px solid  !important;;
    }
    .active-box{
        box-shadow : -1px -1px 2px #565656;
    }
    .user_img{
        border-radius: 50%;
        max-width: 100%;
        height: auto;
    }
    .text{
        width: 60px;
        height: 30px;
        font-size: 20px;
        text-align: center;
    }
    .rank-item-top{
        float: left;
    }
    .rank-item-1 {
        position: relative;
        width: 30%;
        height: 150px;
        /*top: 86px;*/
        left: 30%;
        text-align: center;
        margin-left: calc(5%);
    }
    .rank-item-2 {
        position: relative;
        width: 30%;
        height: 150px;
        /*top: 86px;*/
        left: -40%;
        text-align: center;
        margin-left: calc(5%);
    }
    .rank-item-3{
        position: relative;
        width: 30%;
        height: 150px;
        /*top: 86px;*/
        /*left:0;*/
        right: -1%;
        text-align: center;

    }
    .rank-item-1 img {
        width: 76px;
        height: 68px;
        margin: 8px auto 0;
        position: relative;
        left: -8px;
    }
    .rank-item-2 img ,.rank-item-3 img{
        width: 68px;
        height: 70px;
        margin: 8px auto 0;
        position: relative;
        left: -12px;
    }
    .rank-item-2  .fans-user-pic-container  ,.rank-item-3  .fans-user-pic-container{
        position: relative;
        width: 100%;
        height: 75%;
        margin: 0 auto;
        overflow: hidden;
        padding-top: 20px;
    }
    .rank-item-1  .fans-user-pic-container {
        position: relative;
        width: 100%;
        height: 75%;
        margin: 0 auto;
        overflow: hidden;
    }
    .rank-item-1 .order-icon {
        position: absolute;
        display: block;
        width: 80px;
        height: 95px;
        top: 0;
        left: calc(50% - 48px);
        background: url(/uploads/mask-pic1.png) no-repeat;
        background-size: cover;
    }
    .rank-item-1 .order-name {
        display: inline-block;
        position: absolute;
        bottom: 6px;
        width: 100px;
        height: 28px;
        line-height: 28px;
        left: 50%;
        margin-left: -60px;
        color: #797f89;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        top: 69px;
    }


    .rank-item-2 .order-icon  {
        display: block;
        width: 70px;
        height: 81px;
        bottom: 0;
        background: url(/uploads/mask-pic2.png) no-repeat;
        position: absolute;
        left: calc(50% - 46px);
        top: 20px;
        background-size: cover;
    }
    .rank-item-2 .order-name ,.rank-item-3 .order-name{
        display: inline-block;
        position: absolute;
        bottom: 6px;
        width: 100px;
        height: 28px;
        line-height: 28px;
        left: 50%;
        margin-left: -60px;
        color: #797f89;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        top: 76px;
    }

    .rank-item-3 .order-icon {
        display: block;
        width: 70px;
        height: 81px;
        bottom: 0;
        background: url(/uploads/mask-pic3.png) no-repeat;
        position: absolute;
        left: calc(50% - 46px);
        top: 20px;
        background-size: cover;
    }
    .text-icon{
        -webkit-font-smoothing: antialiased;
        background-color: rgb(200, 200, 200);
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        color: rgb(153, 153, 153);
        cursor: auto;
        display: inline-block;
        font-family: 微软雅黑, Helvetica, Arial, sans-serif;
        font-size: 12px;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        height: 32px;
        line-height: 32px;
        list-style-image: none;
        list-style-position: outside;
        list-style-type: none;
        margin-right: 10px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        width: 32px;
        zoom: 1;
    }
    .order{
        margin: 0px 10px;
    }
    .bg{
        background-color: rgba(219, 218, 218,0.1) !important;

    }
    .rank-item{
        -webkit-font-smoothing: antialiased;
        background-color: rgb(250, 250, 250);
        color: rgb(60, 60, 60);
        display: list-item;
        font-family: 微软雅黑, Helvetica, Arial, sans-serif;
        font-size: 12px;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        height: 50px;
        line-height: 18px;
        list-style-image: none;
        list-style-position: outside;
        list-style-type: none;
        margin-bottom: 0px;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0px;
        padding-bottom: 5px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 5px;
        position: relative;
        text-align: left;
        width: 648.094px;

    }
    .bg_c{
        margin: 0px 12px;height: 40px;padding-left: 1%;
    }

</style>

<div class="nav-tabs-custom">

    <ul class="nav nav-tabs">
        <li class="active active-box" style="display: block;padding: 10px 15px;" ><span class="table-nav-l1">月度</span></li>
        <li class="" style="display: block;padding: 10px 15px;" ><span class="table-nav-l2">季度</span></li>
        <li class="" style="display: block;padding: 10px 15px;" ><span class="table-nav-l3">年度</span></li>
    </ul>

</div>
<div class="nav-tabs-custom">
    <span id="show">显示</span><span id="hide" style="display: none">隐藏</span>

    <ul class="nav nav-tabs" style="display: none">
        <?php

        $datetime = new \DateTime();
        $interval = \DateInterval::createFromDateString('last month');
        $period = new \DatePeriod($datetime, $interval, 6,DatePeriod::EXCLUDE_START_DATE);
        foreach ($period as $date) {
            echo "<li class='' style='display: block;padding: 4px 10px;' >".$date->format('Y-m')."</li>";
        }

        ?>



    </ul>

</div>

<div class="content" id="ullines">
    <div class="row">

        <div class="col-md-12">
            <div class="col-md-4" >
                <div style="background: #fff;height: 110px; padding: 5px 15px;">
                    <h3>成交订单排行榜</h3>

                        <?php if($ranking['user_order']==false): ?>
                            <span class="order"><?php echo $ranking['name']['name'];?></span>|<span class="order"><?php echo $ranking['name']['dize'];?></span>|<em  class="order" style="color:rgb(255,119,0); ">0</em>单
                        <?php else: ?>
                            <span class="order"><?php echo $ranking['user_order']['name'];?></span>|<span class="order"><?php echo $ranking['user_order']['dize'];?></span>|<em  class="order" style="color:rgb(255,119,0); "><?php echo $ranking['user_order']['sum'];?></em>单
                        <?php endif; ?>

                </div>

                <ul class="products-list product-list-in-box">

                        <?php foreach ($ranking['order_endue'] as $k=> $value): ?>

                            <?php if($k==0): ?>
                                <li class="rank-item-top rank-item-1">
                                    <div class="fans-user-pic-container">
                                        <a href="" target="_blank">
                                            <img class="anchor-user-pic" src="<?= $value['img'] ?>" alt="">
                                            <span class="order-icon"></span><span class="order-name" title=""><?= $value['name'] ?></span>
                                        </a>
                                    </div>
                                    <div class="fans-num">
                                        <span class="fans-num-right"><?= $value['dize'] ?>|<span style="color:rgb(255,119,0); "><?= $value['sum'] ?></span>单</span>
                                    </div>
                                </li>
                        <?php elseif($k==1): ?>
                            <li class="rank-item-top rank-item-2">
                                <div class="fans-user-pic-container">
                                    <a href="" target="_blank">
                                        <img class="anchor-user-pic" src="<?= $value['img'] ?>" alt="">
                                        <span class="order-icon"></span><span class="order-name" title=""><?= $value['name'] ?></span>
                                    </a>
                                </div>
                                <div class="fans-num">
                                    <span class="fans-num-right"><?= $value['dize'] ?>|<span style="color:rgb(255,119,0); "><?= $value['sum'] ?></span>单</span>
                                </div>
                            </li>
                        <?php elseif($k==2): ?>
                            <li class="rank-item-top rank-item-3">
                                <div class="fans-user-pic-container"><a href="" target="_blank">
                                        <img class="anchor-user-pic" src="<?= $value['img'] ?>" alt="">
                                        <span class="order-icon"></span><span class="order-name" title=""><?= $value['name'] ?></span>
                                    </a>
                                </div>
                                <div class="fans-num">
                                    <span class="fans-num-right"><?= $value['dize'] ?>|<span style="color:rgb(255,119,0); "><?= $value['sum'] ?></span>单</span>
                                </div>
                            </li>
                        <?php else: ?>
                            <?php if($k % 2 === 0): ?>
                            <li class="item bg">
                                <div  class=" bg_c">
                            <?php else: ?>
                            <li class="item">
                                <div class="bg_c">
                            <?php endif; ?>

                                    <div class="product-img">
                                        <span class="text-icon"><?php echo $k+1 ?></span>
                                    </div>
                                    <div class="product-info">
                                        <a href="javascript:void(0)" class="product-title"><?= $value['name'] ?>
                                            <span class=" pull-right text"> <?= $value['sum'] ?> 单</span></a>
                                <span class="product-description">
                                    <?= $value['dize'] ?>
                                </span>
                                    </div>
                                </div>
                            </li>
                        <?php endif; ?>
                    <?php endforeach; ?>


                </ul>

            </div>
            <div class="col-md-4" >

                <div style="background: #fff;height: 110px; padding: 5px 15px;">
                    <h3>发展客户排行版</h3>
                    <?php if($ranking['user_cust']==false): ?>
                        <span class="order"><?php echo $ranking['name']['name'];?></span>|<span class="order"><?php echo $ranking['name']['dize'];?></span>|<em  class="order" style="color:rgb(255,119,0); ">0</em>单
                    <?php else: ?>
                        <span class="order"><?php echo $ranking['user_cust']['name'];?></span>|<span class="order"><?php echo $ranking['user_cust']['dize'];?></span>|<em  class="order" style="color:rgb(255,119,0); "><?php echo $ranking['user_cust']['sum'];?></em>单
                    <?php endif; ?>
                </div>

                <ul class="products-list product-list-in-box">
                    <?php foreach ($ranking['cust_endue'] as $k=> $value): ?>

                        <?php if($k==0): ?>
                            <li class="rank-item-top rank-item-1">
                                <div class="fans-user-pic-container">
                                    <a href="" target="_blank">
                                        <img class="anchor-user-pic" src="<?= $value['img'] ?>" alt="">
                                        <span class="order-icon"></span><span class="order-name" title=""><?= $value['name'] ?></span>
                                    </a>
                                </div>
                                <div class="fans-num">
                                    <span class="fans-num-right"><?= $value['dize'] ?>|<span style="color:rgb(255,119,0); "><?= $value['sum'] ?></span>个</span>
                                </div>
                            </li>
                        <?php elseif($k==1): ?>
                            <li class="rank-item-top rank-item-2">
                                <div class="fans-user-pic-container">
                                    <a href="" target="_blank">
                                        <img class="anchor-user-pic" src="<?= $value['img'] ?>" alt="">
                                        <span class="order-icon"></span><span class="order-name" title=""><?= $value['name'] ?></span>
                                    </a>
                                </div>
                                <div class="fans-num">
                                    <span class="fans-num-right"><?= $value['dize'] ?>|<span style="color:rgb(255,119,0); "><?= $value['sum'] ?></span>个</span>
                                </div>
                            </li>
                        <?php elseif($k==2): ?>
                            <li class="rank-item-top rank-item-3">
                                <div class="fans-user-pic-container"><a href="" target="_blank">
                                        <img class="anchor-user-pic" src="<?= $value['img'] ?>" alt="">
                                        <span class="order-icon"></span><span class="order-name" title=""><?= $value['name'] ?></span>
                                    </a>
                                </div>
                                <div class="fans-num">
                                    <span class="fans-num-right"><?= $value['dize'] ?>|<span style="color:rgb(255,119,0); "><?= $value['sum'] ?></span>个</span>
                                </div>
                            </li>
                        <?php else: ?>

                            <?php if($k % 2 === 0): ?>
                            <li class="item bg">
                            <div  class=" bg_c">
                            <?php else: ?>
                            <li class="item">
                            <div class="bg_c">
                            <?php endif; ?>
                                <div class="product-img">
                                    <span class="text-icon"><?php echo $k+1 ?></span>
                                </div>
                                <div class="product-info">
                                    <a href="javascript:void(0)" class="product-title"><?= $value['name'] ?>
                                        <span class=" pull-right text"> <?= $value['sum'] ?>个 </span></a>
                                <span class="product-description">
                                  <?= $value['dize'] ?>
                                </span>
                                </div>
                                </div>
                            </li>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </ul>
            </div>
            <div class="col-md-4" >
                <div style="background: #fff;height: 110px; padding: 5px 15px;">
                    <h3>开发房源排行版</h3>
                    <?php if($ranking['user_prod_inst']==false): ?>
                        <span class="order"><?php echo $ranking['name']['name'];?></span>|<span class="order"><?php echo $ranking['name']['dize'];?></span>|<em  class="order" style="color:rgb(255,119,0); ">0</em>单
                    <?php else: ?>
                        <span class="order"><?php echo $ranking['user_prod_inst']['name'];?></span>|<span class="order"><?php echo $ranking['user_prod_inst']['dize'];?></span>|<em  class="order" style="color:rgb(255,119,0); "><?php echo $ranking['user_prod_inst']['sum'];?></em>单

                    <?php endif; ?>
                </div>

                <ul class="products-list product-list-in-box">
                    <?php foreach ($ranking['prod_inst_endue'] as $k=> $value): ?>

                        <?php if($k==0): ?>
                            <li class="rank-item-top rank-item-1">
                                <div class="fans-user-pic-container">
                                    <a href="" target="_blank">
                                        <img class="anchor-user-pic" src="<?= $value['img'] ?>" alt="">
                                        <span class="order-icon"></span><span class="order-name" title=""><?= $value['name'] ?></span>
                                    </a>
                                </div>
                                <div class="fans-num">
                                    <span class="fans-num-right"><?= $value['dize'] ?>|<span style="color:rgb(255,119,0); "><?= $value['sum'] ?></span>套</span>
                                </div>
                            </li>
                        <?php elseif($k==1): ?>
                            <li class="rank-item-top rank-item-2">
                                <div class="fans-user-pic-container">
                                    <a href="" target="_blank">
                                        <img class="anchor-user-pic" src="<?= $value['img'] ?>" alt="">
                                        <span class="order-icon"></span><span class="order-name" title=""><?= $value['name'] ?></span>
                                    </a>
                                </div>
                                <div class="fans-num">
                                    <span class="fans-num-right"><?= $value['dize'] ?>|<span style="color:rgb(255,119,0); "><?= $value['sum'] ?></span>套</span>
                                </div>
                            </li>
                        <?php elseif($k==2): ?>
                            <li class="rank-item-top rank-item-3">
                                <div class="fans-user-pic-container"><a href="" target="_blank">
                                        <img class="anchor-user-pic" src="<?= $value['img'] ?>" alt="">
                                        <span class="order-icon"></span><span class="order-name" title=""><?= $value['name'] ?></span>
                                    </a>
                                </div>
                                <div class="fans-num">
                                    <span class="fans-num-right"><?= $value['dize'] ?>|<span style="color:rgb(255,119,0); "><?= $value['sum'] ?></span>套</span>
                                </div>
                            </li>
                        <?php else: ?>
                            <?php if($k % 2 === 0): ?>
                            <li class="item bg">
                            <div  class=" bg_c">
                            <?php else: ?>
                            <li class="item">
                            <div class="bg_c">
                            <?php endif; ?>
                                <div class="product-img">
                                    <span class="text-icon"><?php echo $k+1 ?></span>
                                </div>
                                <div class="product-info">
                                    <a href="javascript:void(0)" class="product-title"><?= $value['name'] ?>
                                        <span class=" pull-right text"> <?= $value['sum'] ?>套</span></a>
                                <span class="product-description">
                                  <?= $value['dize'] ?>
                                </span>
                                </div>
                                </div>
                            </li>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </ul>
            </div>

        </div>
    </div>
</div>
<div class="content" id="ulline">

</div>






<?php
$js = <<<JS
jQuery('.table-nav-l1').on('click',function() {
    $(this).parent().parent().find('li').removeClass("active active-box");
    $(this).parent().addClass("active active-box");
    $('#ullines').show();
    $('#ulline').hide();
});

jQuery('.table-nav-l2').on('click',function() {
    $(this).parent().parent().find('li').removeClass("active active-box");
    $(this).parent().addClass("active active-box");

    $.get(
        '/myyii/myyii/rankings',
        {
        txt:2
        },
        function (data) {
            $('#ullines').hide();
            $('#ulline').show();
            $('#ulline').html(data);

        }
    );

});

jQuery('.table-nav-l3').on('click',function() {
    $(this).parent().parent().find('li').removeClass("active active-box");
    $(this).parent().addClass("active active-box");
    $.get(
        '/myyii/myyii/rankings',
        {
        txt:3
        },
        function (data) {
            $('#ullines').hide();
            $('#ulline').show();
            $('#ulline').html(data);
        }
    );

});

jQuery('#show').on('click',function() {
    $(this).toggle();
    $(this).siblings().toggle();

});
jQuery('#hide').on('click',function() {
    $(this).toggle();
    $(this).siblings().toggle();

});

JS;
$this->registerJs($js);



?>